<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间选择器</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .datepicker{
            display: inline-block;
            width: 280px;
            height: 30px;
            position: relative;
        }
        .datepicker .datepicker_box{
            width: 280px;
            height: 320px;
            position: absolute;
            top: 30px;
            left: 0;
            color: darkgray;
            background-color: darkblue;
            text-align: center;
            display: none;
        }
        .datepicker .datepicker_box .datepicker_header{
            display: flex;
        }
        .datepicker .datepicker_box .datepicker_header .header_prev{
            flex: 1;
        }
        .datepicker .datepicker_box .datepicker_header .header_content{
            flex: 3;
        }
        .datepicker .datepicker_box .datepicker_header .header_next{
            flex: 1;
        }
        .datepicker .datepicker_box .datepicker_title{
            display: flex;
        }
        .datepicker .datepicker_box .datepicker_title .item{
            flex: 1;
            height: 40px;
            line-height: 40px;
            /* width: 40px; */
        }
        .datepicker .datepicker_box .datepicker_content{
            display: flex;
            flex-wrap: wrap;
        }
        .datepicker .datepicker_box .datepicker_content .item{
            width: 40px;
            height: 40px;
            line-height: 40px;
        }

        .datepicker input{
            outline: none;
        }

       



        
    </style>
</head>
<body>
    开始时间
    <div class="datepicker">
        <input class="" id="start">
        <div class="datepicker_box">
            <div class="datepicker_header">
                <div class="header_prev">上一月</div>
                <div class="header_content">2020/00/00</div>
                <div class="header_next">下一月</div>
            </div>
            <div class="datepicker_title">
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
                <div class="item">日</div>
            </div>
            <div class="datepicker_content">
                <div class="item">01</div>
                <div class="item">02</div>
                <div class="item">03</div>
                <div class="item">04</div>
                <div class="item">05</div>
                <div class="item">06</div>
                <div class="item">07</div>
                <div class="item">08</div>
                <div class="item">09</div>
                <div class="item">10</div>
                <div class="item">11</div>
                <div class="item">12</div>
                <div class="item">13</div>
                <div class="item">14</div>
                <div class="item">15</div>
                <div class="item">16</div>
                <div class="item">17</div>
                <div class="item">18</div>
                <div class="item">19</div>
                <div class="item">20</div>
                <div class="item">21</div>
                <div class="item">22</div>
                <div class="item">23</div>
                <div class="item">24</div>
                <div class="item">25</div>
                <div class="item">26</div>
                <div class="item">27</div>
                <div class="item">28</div>
                <div class="item">29</div>
                <div class="item">30</div>
                <div class="item">31</div>
                <div class="item">32</div>
                <div class="item">33</div>
                <div class="item">34</div>
                <div class="item">35</div>
                <div class="item">36</div>
                <div class="item">37</div>
                <div class="item">38</div>
                <div class="item">39</div>
                <div class="item">40</div>
                <div class="item">41</div>
                <div class="item">42</div>
            </div>
        </div>
    </div>
    
</body>
<script>
    var startInput = document.getElementById("start");
    var box = document.getElementsByClassName("datepicker_box")[0];
    // var box = document.querySelector(".datepicker_box")

    console.log(box)
    
    startInput.onclick = function(){
        box.style.display = "block";
    }

</script>
</html>